<template>
  <div class="apps-page">
    <!-- 顶部菜单栏 -->
    <TopControlBar title="应用列表"/>

    <div class="apps-container">
      <div class="apps-grid">
        <div
            v-for="app in appList"
            :key="app.id"
            class="app-card"
            @click="goToApp(app.path)"
        >
          <div class="app-icon">
            <img :src="getIconUrl(app.icon)" :alt="app.name + ' 图标'"/>
          </div>
          <div class="app-info">
            <h3 class="app-name">{{ app.name }}</h3>
            <p class="app-description">{{ app.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'
import {onMounted, ref} from 'vue'
import TopControlBar from '@/components/TopMenu.vue'

const router = useRouter()

// 应用项接口定义
interface AppItem {
  id: string
  name: string
  icon: string
  description: string
  path: string
}

// 应用列表
const appList = ref<AppItem[]>([
  {
    id: 'navbar',
    name: '懒熊导航',
    icon: 'navbar.svg',
    description: '个人导航页面管理',
    path: '/navbar'
  },
  {
    id: 'doc',
    name: '懒熊文档',
    icon: 'doc.svg',
    description: '文档管理和知识库系统',
    path: '/doc'
  },
  {
    id: 'todo',
    name: '待办计划',
    icon: 'todo.svg',
    description: '个人待办事项管理和计划安排',
    path: '/todo'
  },
  {
    id: 'collect',
    name: '懒熊收藏',
    icon: 'favorite.svg',
    description: '收藏各种佳句、链接、图片等内容',
    path: '/collect'
  },
  {
    id: 'moments',
    name: 'Moments',
    icon: 'moments.svg',
    description: '记录生活中的点点滴滴，个人朋友圈',
    path: '/moments'
  },
  {
    id: 'file-manager',
    name: '文件管理',
    icon: 'file-manager.svg',
    description: '大型视频文件管理和在线播放',
    path: '/file-manager'
  },
  {
    id: 'dev-tools',
    name: '开发工具',
    icon: 'dev-tools.svg',
    description: 'JSON格式化、压缩等开发辅助工具',
    path: '/dev-tools'
  }
])

// 获取图标URL
const getIconUrl = (iconName: string) => {
  return new URL(`../assets/icon/${iconName}`, import.meta.url).href
}

// 跳转到指定应用
const goToApp = (path: string) => {
  router.push(path)
}

onMounted(() => {
  // 设置页面标题
  document.title = '懒熊应用'
})
</script>

<style scoped>
.apps-page {
  min-height: 100vh;
  padding: 88px 2rem 4rem 2rem; /* 为顶部菜单留出空间 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.apps-container {
  max-width: 1200px;
  width: 100%;
}

.apps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  justify-items: center;
}

.app-card {
  background: rgba(var(--color-bg-light), var(--opacity-main));
  border-radius: 16px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  border: 2px solid rgba(var(--color-bg-light), 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  width: 100%;
  min-height: 180px;
}

.app-card:hover {
  transform: translateY(-8px);
  background: rgba(var(--color-bg-light), var(--opacity-hover));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border-color: rgba(66, 184, 131, 0.6);
}

.app-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none;
  outline: none;
}

.app-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all 0.3s ease;
  border: none;
  outline: none;
  box-shadow: none;
}

.app-info {
  width: 100%;
}

.app-name {
  font-size: 1.2rem;
  margin: 0 0 0.5rem 0;
  color: #2c3e50;
  font-weight: 600;
}

.app-description {
  color: #666;
  line-height: 1.4;
  margin: 0;
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .apps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }

  .apps-container {
    max-width: 900px;
  }
}

@media (max-width: 768px) {
  .apps-page {
    padding: 140px 1rem 2rem 1rem; /* 移动端顶部菜单高度更高 */
  }

  .apps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .apps-container {
    max-width: 600px;
  }

  .app-card {
    padding: 1.2rem;
    min-height: 160px;
  }

  .app-icon {
    width: 40px;
    height: 40px;
  }

  .app-name {
    font-size: 1.1rem;
  }

  .app-description {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .apps-page {
    padding: 140px 1rem 1.5rem 1rem; /* 小屏幕设备顶部菜单留白 */
  }

  .apps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }

  .apps-container {
    max-width: 100%;
  }

  .app-card {
    padding: 1rem;
    min-height: 140px;
  }

  .app-icon {
    width: 36px;
    height: 36px;
  }

  .app-name {
    font-size: 1rem;
  }

  .app-description {
    font-size: 0.75rem;
    line-height: 1.3;
  }
}

/* 深色模式 */
.dark .app-card {
  background: rgba(var(--color-bg-dark), var(--opacity-main));
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.dark .app-card:hover {
  background: rgba(var(--color-bg-dark), var(--opacity-hover));
  border-color: rgba(66, 184, 131, 0.6);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.dark .app-name {
  color: #e6e6e6;
}

.dark .app-description {
  color: #b3b3b3;
}

/* 深色模式下的图标适配 */
.dark .app-icon img {
  filter: invert(1) brightness(0.8);
}

.dark .app-card:hover .app-icon img {
  filter: invert(1) brightness(0.8) sepia(1) hue-rotate(200deg) saturate(3);
}
</style>